昨天快速說明了如何分辨 pure function 及何謂 side-effect 的概念，今天轉回來談 react hook

react hook的產生

簡言之，在還沒有 react hook 的時候，只能靠 class component 來設定 state
但伴隨出幾個問題..

• 在 component 之間共享 stateful 的邏輯很困難
• 隨著 component 數量及複雜度的增加，設定 state 的邏輯會散落在各個 lifeCycle 方法中，導致難以維護
• 在 class component 中需要 bind 各種事件及搞懂 this，這讓 react 的學習曲線變的較為困難

為了解決這些問題，產生了 react hook

hook let u split one component into smaller functions based on what pieces are related

常見的 react hook method

react hook 都會以 use 開頭，這裡分別介紹幾個常見的 react hook

基本的 hook

• useState
• useEffect
• useContext

簡表如下

額外 hook

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useDeferredValue
• useTransition
• useId

react hook 要注意的部分

• 只能寫在 function component，不能寫在 class component 內
• 只能在 function component 最外層呼叫 hook，不能在 loop / if-else / nested function 內呼叫

參考資料

https://www.freecodecamp.org/news/react-hooks-fundamentals/
https://reactjs.org/docs/hooks-overview.html

useEffect
https://www.robinwieruch.de/react-hooks-fetch-data/
https://overreacted.io/zh-hant/a-complete-guide-to-useeffect/

https://www.velotio.com/engineering-blog/cleaner-efficient-code-with-hooks-and-functional-programming